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Bootstrap as a tool for web development and graphic 
optimization on mobile devices 


Abstract. The advance of technology requires that people need publicity and 
administrative advice of their business through the Web. It is there where the 
role of the web developer appears since this topic must make use of the appro- 
priate tools that enhance their work. The style pages have been facilitating the 
elaboration of web pages for some years now. However, programmers have not 
created any framework to optimize the size of the interfaces automatically. 

By doing so, navigation from any device without any anomaly. Currently, the 
massive use of mobile devices requires the optimization of the design of the 
graphic interfaces developed for computers to the resolution of mobile devices. 
One could say that this motivated the company Twitter in 2011 to create Boot- 
strap, a framework with the function of adjusting the resolution of websites that 
can be developed from a computer and then be displayed correctly in the differ- 
ent screen resolutions of mobile devices. 

This article tries to orient the evaluation of the Bootstrap tool for the re- 
engineering of the web system "EducArte Comunidad" interacting with the fol- 
lowing design languages: HTMLS, CSS, and JQuery. Specifically, this research 
is carried out based on the observation in the development of computer applica- 
tions under the multiplatform modality. 


Keywords: Websites, Bootstrap, graphic languages, adaptive frame, graphic in- 
terfaces. 


1 Introduction 


1.1 Evolution of online computer systems 


Web systems have evolved rapidly, and then desktop systems have been left behind. 
Some companies have migrated their obsolete systems to the web, as online services 
provide users with faster data processing and improved information availability. 


According to [10], in his article on the development of the educational platform Zera 
(Cuba), he expresses that the use of the Bootstrap framework facilitated the program- 
ming of interfaces and improved the user experience in navigation from any mobile 
device. 


On the other hand, [15] state in their article on M-learning, that educational systems 
must currently focus on pocket technology, that is, mobile devices and tablets that 
facilitate the learning process at an economic level. For this reason, we intend to per- 
form the re-engineering of the EducArte Comunidad system since the system only has 


a presentation for computers, but it will be taken to the mobile part through adaptabil- 
ity. 

Following the line of development of educational systems, [7] considers that the use 
of languages that provide adaptability, especially Bootstrap allowed the library web 
system of the University of Maryland to be adaptable. This adaptability allowed ac- 
cess through cell phones and tablets. The results of this implementation were benefi- 
cial by improving the number of virtual visits and users experiences. 


There is no doubt that the adaptable aspect in the development of applications is an 
advantage when it comes to creating systems. Therefore, [9] states that predecessor 
websites were created with design aspects that were only relevant to PCs. This type of 
development posed a large number of problems, having to create a different design 
for each device where the application was running. To solve this problem, Bootstrap 
was implemented in the graphic interfaces of the Juang Restaurant System, finally 
generating an optimal presentation in the content displayed on mobile devices. 


This situation, according to [3], is conducive to the emergence of receptive websites, 
such as the SANEC Portal, which was developed with the methodology of adaptabil- 
ity, seeking to adjust the desktop system to all mobile devices, increasing the number 
of visits exponentially. Likewise, the aim is to reach the demand of users in the Edu- 
cArte Community system. Currently, frameworks dedicated to web interfaces are so 
important as to improve the visual interaction between the user and a computer sys- 
tem. According to [11], the most used framework nowadays is Bootstrap, due to the 
ease and resources it offers to create web interfaces. 


The development of this adaptive web system has social importance for the benefit of 
the community to be implemented in vulnerable sectors, where children and young 
people have the facility to access the services offered by the system through a mobile 
device. The reason is that almost every home has a mobile device and not a computer 
due to economic difficulties. Therefore, with the development of this web system, we 
intend to reduce the limitations in the design and architecture of the "EducArte Co- 
munidad" system, opening the way to the m-learning paradigm, conditioning the 
availability of its contents and its correct functioning in mobile devices. All this, to 
present one of the main results achieved in the research related to the adaptive web, 
highlight the theoretical references that support the solution. 


2. Materials and methods 


The methodology of this research is of a bibliographic and experimental nature. Ap- 
plied analysis and synthesis is made to summarize the theories on which the research 
is based, citing the criteria of web development experts on the Bootstrap framework 
and its characteristics, to conclude the importance and guarantee of its use for the 
graphic optimization of web applications. The following aspects will be studied in 


depth: definition of Bootstrap, its main characteristics, the compatible browsers, the 
types of language it integrates. Attached to the above, the following items will also be 
detailed: 


e Definition of Bootstrap principles and usability guidelines. 
e Experimentation and evaluation of the "EducArte Community" web sys- 
tem, which will be re-engineered with Bootstrap. 


2.1 Bootstrap for the production of web systems 


Nowadays, you can find tools for web design, which Twitter developed for those 
users who do not have much knowledge in HTML and CSS programming. It is worth 
emphasizing that there is currently a fine line between designers and programmers in 
this area of development, making possible the creation of ideal tools for creative pro- 
cesses, which contribute to the development of software without previous knowledge 
of engineering [13]. 


[21] defines that: The user regularly changes electronic devices. Therefore, program- 
mers must develop web systems to adapt to a variety of resolutions, specifically im- 
age size and command sequences. In short, the web system must automatically re- 
spond to different devices to satisfy user preferences. The adaptive design of Boot- 
strap is based on the use of third level style sheets with CSS Media Queries, which 
allows styles to be applied depending on the size of the screen on which the web sys- 
tem is displayed. According to [17], Boostrap has surprising features for front-end 
development, being visually coupled to the needs and experiences of the user, the 
features presented are: 


e It allows the insertion of several elements online: icons, drop-down menus, 
combining HTMLS, CSS and Javascript languages. 

e The design will be adaptable, not affected by the scale or resolution of the 
mobile device. 

e The design of columns is faster and easier to configure. 

e It integrates with the main Javascript and Media Queries libraries. 


Responsive web system against mobile applications 


For [20], the application can read user contacts, calendars, photo galleries, and other 
resources. But in the case of a web system, it does not allow access to system re- 
sources. A difference in compatibility that exists in web development is that the de- 
velopment code of the mobile application depends on the phone manufacturer; at the 
same time, any mobile browser can read the HTML-based web system. On the other 
hand, the user must download the application and its updates separately, which will 
not be necessary for receptive systems. 


2.2 Screen adaptation on mobile devices 


For [1], small screen mobile devices are gaining popularity as time goes by. Video 
game consoles and smart TVs are also becoming more common among consumers, as 
they allow them to browse the Internet on high-resolution devices in comfort. 


That is why web developers have begun to bet on the graphic adaptability of systems 
in a wide variety of screen resolutions, with the primary objective of giving the user 
maximum usability and presentation of content in a clean and appropriate. Below, 
Table 1 shows the visualization preference that users have on a website, a survey 
conducted by Google in 2014 [14]. 


Table 1. Preference in screen accuracy according to Google users. 


Range accuracy (px) Popularity (%) 
1366x768 20.74 
1024x768 9.61 
1280x800 9,35 
1920x1080 6.63 
1440x900 5,44 
768x1024 526 
1280x1024 5.22 
1600x900 4.14 

320x480 2.90 


Source. Data taken from a Google survey published by W3C. 


Composition of the adaptive system 


According to [9], when the Internet became widespread in the 1990s. It was usual for 
web systems to be compiled into a spreadsheet structure. Tables were the only effec- 
tive way to link text and graphics. These issues occurred when sites became more 
sophisticated and extensive, and table structures were transformed into more complex 
nested tables. 


File download formats 


For [6], Bootstrap is free to download and also for unlimited commercial use, allow- 
ing web designers to use it as a tool to create web systems for different purposes. The 
source code contains the files Bootstrap CSS, Less, which is a CSS extension, Javas- 


cript, and other original fonts, as well as documentation. These files can be found in 
GitHub. 


2.3 Preparing Bootstrap for web development 


[3] defines that: Bootstrap contains compiled and compressed source code, as well as 
versions of CSS, JavaScript, and font files. Also, when downloading it, the files will 
be extracted to the root of the web system to link locally in the document header. The 
Bootstrap file structure consists of three folders: css, js, and fonts. We can recognize 
compressed files by the .min file name. These files contain the same code as the trans- 
lated files but are compressed, which takes less time to download from the server. 


Bootstrap file structure (see Fig. 1). 


bootstrap/ 
css/ 
bootstrap.css 
bootstrap.min.css 
bootstrap-theme.css 
bootstrap-theme.min.css 
js/ 
bootstrap. js 
bootstrap.min.js 
fonts/ 
glyphicons-halflings-regular.eot 
glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
glyphicons-halflings-regular.woff 


Fig. 1. Compressed files can be recognized by the. min file name. To access or read Bootstrap 
files it is recommended that they are compressed [14]. 


Bootstrap compatibility and support 


Bootstrap is compatible with the latest versions of desktop and mobile browsers. 
When running on older browsers, it differs in style, functionality, and performance of 
some components. In Windows, Bootstrap runs in Chromium, Chrome, and Firefox 
browsers, which are not officially compatible. However, the network version allows 
them to automatically link to the repositories where the Bootstrap libraries are locat- 
ed. On the other hand, it unofficial sources states to work quite well with Linux [12]. 


Fig. 2. Multiplatform web design with Bootstrap 


Grid system 


[14] claims that: 

Bootstrap always works with a sensitive and predefined grid system that is distributed 
in the twelfth column. The grid system creates a design with content, on the site di- 
vided into sets of columns and rows. The grid system is surrounded by a div 
container (fixed width) .container-fluid (adaptive width) element. A line is then in- 
serted into the container. (Row). 


<div class="container"> 
<div class="row"> </div> 
</div> 


The site columns are integrated into the rows. The purpose of the rows is to divide the 
columns into horizontal groups. The site content is placed within individual columns. 


<div class="container"> 
<div class="row"> 
<div class="col-md-6">Hello Word</div> 
<div class="col-md-6">My name Oscar Lopez</div> 
</div> 
</div> 


You can use the HTML table containing the line (tr) to help outline the structure of 
the cell (td). The content of the table, such as text, graphics, and so on, is written in- 
side the cell. The height of cells determines the height of the row around them. In a 
grid system, columns are similar to cells in a table, since the site content is embedded. 
The row always begins with a new group of columns. Unlike a grid, rows can contain 
a different number of columns [14]. 


<div class="container"> 
<div class="row"> 
<div class="col-md-12">EducArte Comunidad</div> 
</div> 
<div class="row"> 
<div class="col-md-4">Home </div> 
<div class="col-md-4">Gallery </div> 
<div class="col-md-4">Notes</div> 
</div> 
</div> 


The spacing of the columns is 15 pixels by default on the left and right sides created 
by the fill. Because the column fill is at both edges, the content area of the first and 
last columns in the row is not aligned with the container. The left and right borders 
were created for columns with negative margins at -15 pixels. This will change the 


position of the first and last columns in the row so that their content area is aligned 
with the container [14]. Bootstrap has a total of four predefined breakpoint definitions 
for columns: lg, md, sm, and xs. 


Breakage points 


Table 2. Acceptance of breakpoints in pixels. 


Category Width in pixels Devices 

.col - lg- * > 1200 Large desks 
.col - md- * > 992 Small desks 

.col - sm- * > 768 Tablets and small screens. 
.col - xs- * < 768 Smart phones 


Source. Own Elaboration 


For [14], a website can be divided into four columns when viewed on a desktop 
screen. In tablet view, the columns are divided into two rows and there are only two 
columns next to each other. In a cell, columns are always 100 percent wide, unless 
you specify a separate column. xs- * category. 


<div class="container"> 
<div class="row"> 
<div class="col-sm-8 col-md-3">Part 1 </div> 
<div class="col-sm-6 col-md-3">Part 2</div> 
<div class="col-sm-6 col-md-3">Part 3</div> 
<div class="col-sm-4 col-md-3">Part 4</div> 
</div> 
</div> 


Graphics window configuration 


According to [8], is the visual area in which documents are displayed in HTML, is 
where primarily applies a scalability to the interface, this is done because you must set 
a value for mobile devices, then detaches some attributes that has the graphical win- 
dow: 


Width: device width or number of pixels. 

Height: height of the device or value in pixels. 

Initial scale: 0 - 1 (1 indicates that it is not scaled). 

User scale: yes / no (indicates if the user can change the scale). 

Minimum scale: 0 - 1 (minimum scale of the graphic window). 

Maximum scale: 0 - 1 (maximum scale of the graphic window). 

To apply a receptive design: 

<meta name = "viewport" content = "width = device - width, initial - scale = 1.0" 


For mobile devices, it is preferable to disable the zoom: 
<meta name = "viewport" content = "width = device - width, initial - scale = 1.0, 
maximum - scale = 1.0, user - scalable = no"> 


3. Implementation of Bootstrap in the EAC EducArte 
Community web system. 


@ EducArte Comunidad 


ae 
Edición de Videos 
r 


( 
eS 


Sistema Educative 
EducArte comunidad 


| Tel: 0994591364 


Fig. 3. Web System "EducArte Community". 


The EducArte Comunidad system is an educational web platform dedicated to offer- 
ing diverse knowledge courses to the communities of the city of Portoviejo, Ecuador. 
This system is accessible without registration costs. It was developed by the student 
author of this article, belonging to Faculty of Computer Science at Technical Univer- 
sity of Manabi. The software has efficient functions in the backend, but in the 
frontend aspect, only CSS style sheets are utilized. They were not optimal due to the 
exuberant coding, and therefore the lack of graphic adaptability in mobile devices. In 
the next section, we will present some code fragments where Bootstrap was imple- 
mented to give the educational system an automatic resolution adjustment. In the 
reengineering of the system, the linked Bootstrap libraries will be used online. 


Fig. 4. Bootstrap libraries taken online. 


The following code details the creation of the login with Bootstrap classes, using the 
div constant for the separation of text entry: email and password. 


\o 


Fig. 5. Form (login) with Bootstrap. 


Using the nav_link class, a vertical drop-down bar is being created, which is located on the left 
side of the interface. 


Fig. 6. Sidebar with Bootstrap. 


Sidebar with Bootstrap. With these lines of code you could create a horizontal naviga- 
tion bar, with multiple options, commonly called nabvar. 


Fig. 7. Navbar created with Bootstrap classes. 
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@ Educarte Comunidad @ Educarte Comunidad @ EducArte Comunidad 


MATEMATICA BASICA 


ANGEL ISAIAS 
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Fig. 8. The following images were captured from a Samsung J5 cell phone, and it can 
be seen that the adaptability is 100% fulfilled. 


4. Results and discussions 


During the Covid-19 pandemic, it is clear that not every family has a laptop or a desk- 
top computer for online activities, but they generally do have a smart cell phone. Ac- 
cording to [4], he states that the process of incorporating ICT into education is a fun- 
damental component in the development of education in the 21st century. In this 
sense, the indicators of acceptability in cellular networks and the use of mobile devic- 
es to access the Internet in Latin America show a growing and highly favorable sce- 
nario for educational processes mediated by mobile devices. This issue is due to their 
adaptation to the system in which we live, where there is a tendency to different 
anomalies (pandemics, civil wars, among others). Time is money, and an adaptative 
application would avoid increases in its creation. According to [20], several tools 
integrate Bootstrap for the development of web systems and save development time. 
They are Pingendo, Brix, Jetstrap, Pinegrow, Bootstrap Studio, Bootply, Bootmetro, 
JSfiddle with Bootstrap, among others. 


Emphasizing a tool that could allow the accelerated development of interfaces would 
be Bootstrap Studio, as it is considered a Web 2.0 tool due to its synchronization of 
graphic libraries and database integration. As mentioned [2], at present, the potential 
of the cell phone as an educational tool would improve the presentation and availabil- 
ity in time and resource of computer applications, such as the case of (DpWcE) "Web 
page design in educational contexts". This design was a Spanish educational system 
of the UNED for the doctoral process. This web portal was developed under the W3C 
standard by using layout languages and CSS dynamics. It is worth mentioning that the 
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results of this article indicate the importance of migrating the desktop aspect to the 
mobile one to detect user satisfaction and an increase in the number of visits. 


Following the same line of research, for [18], the application of Bootstrap in the Web 
System of the Faculty of Computing and Informatics (University of Malaysia) im- 
proved performance on mobile devices. According to the experimental results, the 
Page Speed Insights tool indicated that mobile speed scores increased from 27/100 to 
91/100 after the Bootstrap framework was implemented. On the other hand, speed 
scores for the desktop also increased from 28/100 to 97/100. Besides, the Web Page 
Test tool revealed that the loading time decreased from 10,175 seconds to 3,099 sec- 
onds after optimizing the responsiveness of the website. The following paragraphs 
will detail the values corresponding to navigation speed, loading time, and the number 
of weekly visits, both on mobile and desktop of the EAC (EducArte Comunidad) 
platform. The data could be estimated thanks to the software Page Speed Insights of 
Google, which allows analyzing the performance of web portals. Likewise, the 
Google Analytics API was used to measure visits to the portal. 


Table 3. Assessment of browsing speed, loading time, number of visits and adaptability of the 


EAC Web System. 
MEASURED TOOLS Portal with BS | Portal without BS 
ASPECTS 
Navigation Speed | Page Speed Insights 1,7 s 2,0 s 
Charging time Page Speed Insights 1,7 s 2,0 s 
Number of visits Google Analytics 75 users 45 users 
to the portal 
Adaptability ac- Woorank Analytics 100% adaptive No BS 
cording to Woo- Compressed css 
rank analysis files 


Source. Own Elaboration 


After analyzing the web system EAC in its two versions, it was possible to obtain a 
positive result in terms of browsing performance: The implementation of BS manages 
to minimize with 3 ms, the loading time, and browsing speed concerning EAC with- 
out BS. On the other hand, it was possible to increase the audience of the portal 
through the Google Analytics tool. The access to the portal has increased from 45 to 
75 users. In summary, EAC users feel satisfied because they can navigate from their 
mobile devices. 


Table 4. User experience through surveys in Google Forms 


USER EXPERIENCE 


QUESTIONS ANSWERS 


How do you consider the navigation High (40) Medium (10) 
quality of EAC with Bootstrap on 
your mobile device? 


How do you consider the navigation Under (45) Medium (5) 
quality of EAC without Bootstrap 
on your mobile device? 


In which presentation do you like With Bootstrap (50) | Without Bootstrap 


the EAC system best? (0) 
Regarding the loading speed of the EAC without BS EAC with BS (15) 
system, which one do you think is (35) 

slower? 


Source. Own Elaboration 


The data obtained through the experience questionnaire shows that for users, Boot- 
strap improves the presentation and adaptability of interfaces, including in aspects of 
load and runtime. According to [19], they state that the use of responsive tools poten- 
tially improves the presentation of web portals, bypassing mobile development, and 
allowing obsolete systems (desktop) to apply re-engineering. Also, the web education 
service "Labyrinth" that, after being a desktop system, transformed it into an adaptive 
web system supported by a cloud infrastructure to update it. We concluded that the re- 
engineering done was the optimal solution to improve the availability and perfor- 
mance of the system. 


Also, the EAC portal improved its availability, speed of navigation, and loading time. 
Also, its amount of code decreased because Bootstrap contains embedded code that 
allowed through a sentence to design essential components, such as login, navbars, 
jumbotrons, footers, tables, warning messages, among others. 


5. Conclusions 


The use of Bootstrap allows the adaptation of web environments to different devices, 
without the need for operating systems, so it is an advantage in time and money, 
which is what currently would be convenient for companies. There is no doubt that 
this "responsive" movement has come to have an impact on user access to different 
websites. The company Google has incorporated into its servers the use of these 
graphic libraries that allow users to upload sites to the Internet and make them adapt- 
able. Finally, the objective of this article is to present the web system "EducArte Co- 
munidad" to the population of "El Flor6n" in the future. Children from this communi- 
ty will have the facility to access the services offered by the system through a mobile 
device since it is evident that almost every family has a smart device and not a com- 
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puter due to financial difficulties. The supported data collected by a survey conducted 
last year by the author of this article, where it is evident that the majority of the popu- 
lation has smart mobile devices and not computers. 


Finally, positive results were achieved with the reengineering of the EAC Web Sys- 
tem, improving graphic and navigation aspects, such as 100% adaptability to various 
mobile devices, loading time, and system speed. In the analysis, it was also possible 
to diagnose that Bootstrap increased the weight of the system because it creates 
strings of code through its graphic libraries. This disadvantage was diagnosed but 
ignoring that small excess, it improved the appearance and speed of the system and, 
therefore, satisfied users. The advantages provided by Bootstrap had an impact on the 
increase in the audience of the EAC web system. Currently, the system is available at 
the address: eacomunidad.xyz, where the system will appear in its two versions: with 
BS and without BS. As future improvements, they will try to create modules such as 
online chat, library, academic activities, games, among other interactive modules. It is 
worth noting that it seeks that this system in the future is free software, becoming a 
significant contribution to distance education or online, for schools, colleges, and 
inclusive universities. There is no doubt that this "responsive" movement has come to 
have an impact on user access to different websites. The company Google has incor- 
porated into its servers the use of these graphic libraries that allow users to upload 
sites to the Internet and make them adaptable. Finally, the objective of this article is to 
present the web system "EducArte Community" to the population of "The Florón" in 
the future. Children from this community will have the facility to access the services 
offered by the system through a mobile device since it is evident that almost every 
family has a smart device and not a computer due to financial difficulties. The sup- 
ported data collected by a survey conducted last year by the author of this article, 
where it is evident that the majority of the population has smart mobile devices and 
not computers. 


Referencias 


1. Afia, Z; Syed, J; Khurram, S; y Usman, A. The users experience quality of responsive web 
design on multiple devices. ICFNDS 18: Proceedings of the 2nd International Conference 
on Future Networks and Distributed Systems. Recovered from: 
https://dl.acm.org/doi/abs/10.1145/3231053.3234632. Published in 2018. 


2. Brazuelo, F; y Cacheiro, M. Design of Educational web pages for mobile phones. Elec- 
tronic magazine of educational technology. Recovered from: 
https://www.edutec.es/revista/index.php/edutec-e/article/view/437/172. Published in 2010. 


3. Carranco, J; y Maya, E. Design and development of the adaptive web portal of SANEC 
(Ecuadorian sanctuaries) in the diocese of Ibarra. Magazine UTN. Recovered from: 
http://repositorio.utn.edu.ec/bitstream/123456789/5611/3/ARTICULO.pdf. Published in 
2016. 


14 


10. 


11. 


12. 


13. 


14. 


15. 


16. 


. Chiappe, A. Trends in digital educational content in Latin. Cuaderno SITEAL UNESCO. 


Recovered from: https://unesdoc.unesco.org/ark:/48223/pf0000245673. Published in 2016. 


Danlin, O. Responsive web design and php e-commerce. Conferences THESEUS. Recov- 
ered from: https://www.theseus.fi/handle/10024/153778. Published in 2018. 


Git Hub. Git HUB Wbs/bootstrap: The most popular HTML, CSS, and JavaScript frame- 
work for developing responsive, mobile first projects on the web. Recovered from: 
https://github.com/twbs/bootstrap. Published in 2016. 


. Glassman, N; y Shen, P. One site fits all: responsive web design. Journal of Electronic Re- 


sources in Medical Libraries. Recovered from: 
https://www.tandfonline.com/doi/abs/10.1080/15424065.2014.908347. Published in 2015. 


Jiang, W; Zhang, M; Jiang, Y. y Zhang, Y. Responsive web design mode and application. 
Workshop on Advanced Research and Technology in Industry Applications (WARTIA). 
Recovered from: https://ieeexplore.ieee.org/document/6976522/. Published in 2015. 


Lee, J; Jung, M; y Kim, H. Responsive web design according to the resolution. IEEE Ex- 
plore. Recovered from: https://ieeexplore.ieee.org/document/7434345. Published in 2016. 


Manso, Y; Cañizares, R; y Febles, J. Responsive web design for educative platform 
ZERA. Cuban Journal of Computer Sciences. Recovered from: 
https://reci.uci.cu/?journal=rcci&page=article&op=view&path%5B%5D=1048&path%5B 
%5SD=422. Published in 2016. 


Marcotte, E. Responsive Web Design. A List Apart. Recovered from: 
https://alistapart.com/article/responsive-web-design/. Published in 2011. 


Nilesh J. Review of different responsive css front-end frameworks. Journal of Global Re- 
search in Computer Science. Recovered from: http://www.rroij.com/open-access/review- 
of-different-responsive-css-frontend-frameworks.pdf. Published in 2014. 


Pekka, J; y Solanen, T. On the design of a responsive user interface for a multi-device web 
service. 2nd ACM International Conference on Mobile Software Engineering and Systems. 
Recovered from: https://ieeexplore.ieee.org/abstract/document/7283029. Published in 
2015. 


Peltomäki, V. Bootstrap Framework as a web design tool. Recovered from: 
https://www.theseus.fi/bitstream/handle/10024/74557/Peltomaki_Veera.pdf?sequence=1 &i 
sAllowed=y. Published in 2014. 


Pisanty, A., Enriquez, L., Chaos, L., & Garcia, M. (2010). “M-learning en ciencia” - 
Introducción de aprendizaje móvil en física. RIED. Revista Iberoamericana de Educación a 
Distancia, 13(1), 129-155. doi: http://dx.doi.org/10.5944/ried.1.13.892 


Powers, D. Introduction to media queries. Adobe Developer Connection. Recovered from: 
https://www.adobe.com/devnet/archive/dreamweaver/articles/introducing-media- 
queries.html. Published in 2011. 


17. 


18. 


19. 


20. 


21. 


15 


Rodriguez, R; Vera, P; Marko, I; Zain, G. 
Adaptive web frameworks analysis based on html5. XX Workshop of Researchers in 
Computer Science. Recovered from: 


https://pdfs.semanticscholar.org/69a6/6e9bdb643c94c561f1c1895cf7c4ce199a4b.pdf. Pub- 
lished in 2018. 


Shan, T; Obit, J; Rayner, A; y Tahir, A. Enhancing the Performance of University’s Web- 
site for Mobile Devices Based on Responsive Web Design Approach. American Scientific 
Publishers. Recovered from: 
https://www.researchgate.net/publication/322098135_Enhancing_the_Performance_of_Un 
iversity's_Website_for_Mobile_Devices_Based_on_Responsive_Web_Design_Approach. 
Published in 2017. 


Stočes, M; Masner, J; Jarolímek, J; Šimek, P; Vaněk, J; y Ulman, M. Cross-Platform user 
interface of E-learning applications. 11th International Conference Mobile Learning 2015. 
Recovered from: https://files.eric.ed.gov/fulltext/ED562430.pdf. Published in 2015. 


Suraj, G; y Adkar, P. A review paper on bootstrap framework. IRE Journals. Recovered 
from: https://irejournals.com/formatedpaper/1701173.pdf. Published in 2019. 


Thomas, A; Walsh, P; y Kapfhammer, M. Automatic detection of potential layout faults 
following changes to responsive web pages. IEEE Explore. Recovered from: 
https://ieeexplore.ieee.org/abstract/document/7372059. Published in 2015. 


